<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>我的排行榜</title>
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/mod.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/list.css" />
		<script src="{$staticHost}/static/js/jquery-1.8.3.min.js"></script>
		<script src="{$staticHost}/static/js/js.js"></script>
		<script src="{$staticHost}/static/js/iscroll.js"></script>
	
		{if $os=="android"}
		<style>
			.list-06 dd {word-wrap: break-word; word-break: normal;word-break:break-all; line-height: 18px;color:#585c68;font-size:14px;}
			.list-06 li { padding: 10px 0 10px 100px; position: relative; border-bottom: 1px solid #DADAD8;}
			.list-06 dl { line-height:16px; font-size: 12px; position: relative; }
			.list-06 dt {
				word-break:break-all; font-weight:normal;font-size:17px;color:#585c68;
				padding-bottom:8px; line-height: 20px; padding-right;: 10px;
				 }
			.list-06 .num{color:#202f53;font-size:21;}
		</style>
		
		{else} 
		<style>
			.list-06 dd {color:#585c68;word-wrap: break-word; word-break: normal;word-break:break-all; line-height: 18px;font-size:13px}
			.list-06 li { padding: 10px 0 10px 100px; position: relative; border-bottom: 1px solid #DADAD8;}
			.list-06 dl { line-height:16px; font-size: 12px; position: relative; }
			.list-06 dt {
				word-break:break-all; font-weight: bold; color:#202f53;font-size:16px;
				padding-bottom:8px; line-height: 20px; padding-right: 10px;
				 }
			.list-06 .num {
			 font-weight: bold;color:#000;
			 font-size: 20px; 
			}
					
			 	
		</style>
		{/if}
	</head>
	<body>
		<!-- <div class="load-ios"></div>
		<div class="load "><span></span></div> -->
		<section id="wrapper" class="list-box w640">
			<ul id="list" class="list-06 w640" ></ul>
		</section>

		<section id="empty" class="empty-box">
			<div>
				<img src="{$staticHost}/static/images/bg/image1_03-min.png" >
				<p>你都没有群组<br/>怎么会有荣耀的排名呢</p>
				<a href="joggers://createGroup">创建群组</a>
				<a href="joggers://groupList">发现有趣群组</a>
			</div>
		</section>
		
		<script id="test" type="text/html">
			<% for(var i=0; i< rank.length ;i++){%>
				<li>
					<a href="<%=rank[i].url%>"></a>
					<span class="num">
						<%=((rank[i].page-1)*20)+i+1 %>
					</span>
					
					<% if (rank[i].header.length>0){%>
					<img src=<%=rank[i].header%> >
					<%}%>
					<% if (rank[i].header.length==0){%>
					<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">
					<%}%>
					<dl id="c-blue">
						<dt><%=rank[i].name%><% if(rank[i].authenticate==1){%><i class="ico-crown"></i><% } %><% if(rank[i].isActivity==1){%><i class="ico-activity"></i><% } %></dt>
						<dd>总里程<%=rank[i].totalMileage.toFixed(2) %>km</dd>
						<dd>总排行:<%=rank[i].rank %></dd>
					</dl>
				</li>	
			<%}%>
		</script>
	</body>
	
	<script>
		window.onload = function (){
		dipcss();
		};

		var gid=0;
		var page=1
		var rank = 0;
	
		var time = new Date(new Date().getTime());
		time = (time.getFullYear()+"-"+(time.getMonth()+1)+"-"+time.getDate()+" "+time.getHours()+":"+time.getMinutes());

		var downTime = new Date(new Date().getTime());
		downTime = (downTime.getFullYear()+"-"+(downTime.getMonth()+1)+"-"+downTime.getDate()+" "+downTime.getHours()+":"+downTime.getMinutes());
		$(function(){
			$.getJSON('{$staticHost}/groupWeb/myGroupRank',{}, function(data, error) {
				var info = data.rank;
				
				for(var i=0;i<info.length;i++){
						info[i].url = "joggers://groupRoom/"+info[i]['gid'];
						info[i].page = page;
						gid = info[i].gid;
					}
					
				var html = template('test', data);
				document.getElementById('list').innerHTML = html;
				if( $("#list li").length==0){
				   $("#ref").css("display","none");
				   $("#empty").css("display","block");
				}

				var counter = 0;
			    var num = 0;
			    var pageStart = 0,pageEnd = 0;
				var objul = document.getElementById("list");
				var lis=objul.getElementsByTagName("li");
				
		    // dropload
		    var dropload = $('#wrapper').dropload({
			    loadUpFn : function(me){
			         $.ajax({
						type: 'GET',
						url: '{$staticHost}/groupWeb/myGroupRank',
						dataType: 'json',
						data:{},
			            success: function(data){
			               var result = '';
							counter++;
							pageEnd = num * counter;
							pageStart = pageEnd - num;
							
							var info = data.rank;
							
							if(data.rank.length> 0) {
								for(var i=0;i<info.length;i++){
									info[i].url = "joggers://groupRoom/"+info[i]['gid'];
									info[i].page = 1;
									}
									page = 1;
									gid = info[info.length - 1].gid;
								var html = template('test', data);
								document.getElementById('list').innerHTML = html;
								
							}
							dipcss();
			                // 为了测试，延迟1秒加载
			                setTimeout(function(){
			                    $('.lists').html('');
			                    $('.lists').prepend(result);
			                    me.resetload();
			                },1000);
			            },
			            error: function(xhr, type){
			                alert('Ajax error!');
			                me.resetload();
			            }
			        });
			    },
			    
			    loadDownFn : function(me){
			    	 
			         $.ajax({
						type: 'GET',
						url: '{$staticHost}/groupWeb/myGroupRank',
						dataType: 'json',
						data:{gid:gid},
						success: function(data){
							var result = '';
							counter++;
							pageEnd = num * counter;
							pageStart = pageEnd - num;
						   if(data.rank.length> 0 && data.rank.length!=lis.length) {
								var item = data.rank;
								aid = item[item.length - 1].aid;

								gid = item[item.length - 1].gid;
								page = page+1;
								var info = data.rank;
								for(var i=0;i<info.length;i++){
									info[i].url = "joggers://groupRoom/"+info[i]['gid'];
									info[i].page = page;
									gid = info[i].gid;
								}
								gid = item[item.length - 1].gid;
								var html = template('test', data);
								$('#list').append(html);
							
						  }
			                dipcss();
			                // 为了测试，延迟1秒加载
			                setTimeout(function(){
			                    $('.lists').append(result);
			                    me.resetload();
			                },1000);
			            },
			            error: function(xhr, type){
			                alert('Ajax error!');
			                me.resetload();
			            }
			        });
			    }
			    
				});
		   
			/**上拉加载**/
			});
		});
		
		function getQueryString() {
	    var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+", "g"));
	    for (var i = 0; i < result.length; i++) {
	        result[i] = result[i].substring(1);
		    }
		    return result;
		}
		//根据QueryString参数名称获取值
		function getQueryStringByName(name) {
		    var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
		    if (result == null || result.length < 1) {
		        return "";
		    }
		    return result[1];
		}
		//根据QueryString参数索引获取值
		function getQueryStringByIndex(index) {
		    if (index == null) {
		        return "";
		    }
		    var queryStringList = getQueryString();
		    if (index >= queryStringList.length) {
		        return "";
		    }
		    var result = queryStringList[index];
		    var startIndex = result.indexOf("=") + 1;
		    result = result.substring(startIndex);
		    return result;
		}

	var browser = {
	versions: function() {
	var u = navigator.userAgent, app = navigator.appVersion;
	return {//移动终端浏览器版本信息 
	trident: u.indexOf('Trident') > -1, //IE内核
	presto: u.indexOf('Presto') > -1, //opera内核
	webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
	gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
	mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
	ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
	android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
	iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
	iPad: u.indexOf('iPad') > -1, //是否iPad
	webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
	};
	}(),
	language: (navigator.browserLanguage || navigator.language).toLowerCase()
	}
	
	$(".load" + (os() == 'ios' ? '-ios' : '')).css('display','block');
	
	function dipcss() {
		if (os() == 'ios'){
	 		$(".load-ios").css('display','none')
	 	}else if (browser.versions.android) {
	 		$(".load").css('display','none')
	 		
		}
	}

	function os() {
		return (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) ? 'ios' : 'android';
	}
</script>

	<script src="{$staticHost}/static/js/dropload.min.js"></script>
{template 'show/web-footer'}